import React from "react";
import { Route, Switch } from "react-router-dom";
import { Badge } from "antd";
import Iconfont from "./util/iconfont";
import "./App.css";
import routes from "./routes";
import { MqttProvider } from "./util/mqttContext";
// redux
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { setQiankunState } from "./redux/actions";

import LibraryJs from "./library/js"; // 公共工具类
import LibraryUi from "./library/ui"; // 公共工具类
import Share from "./redux/share"; //共享redux

import initQiankun from "./render/qiankun";

// 消息
// import pager from "./util/pager"  // 定义传入子应用的动态数据（RxJS）

let changePage = (path) => {
  window.history.pushState(null, path, path);
};
class App extends React.Component {
  render(props) {
    return (
      <div className="App">
        <MqttProvider>
          <header className="App-header">
            <div className="menu">
              <span
                onClick={changePage.bind(this, "/index")}
                className="App-link"
              >
                主页
              </span>
              <span
                onClick={changePage.bind(this, "/modulelist")}
                className="App-link"
              >
                我的功能
              </span>
              <span
                onClick={changePage.bind(this, "/chat")}
                className="App-link"
              >
                聊天
              </span>
            </div>
            <Badge count={this.props.state.message.num}>
              <Iconfont type="icon-xiaoxi1" style={{ fontSize: 22 }} />
            </Badge>
          </header>

          <div className="App-content">
            <Switch>
              {routes.map((v) => {
                return (
                  <Route
                    path={v.path}
                    exact={v.exact ? true : false}
                    component={v.component}
                    key={v.path}
                  />
                );
              })}
            </Switch>
            <div>{this.props.children} </div>
          </div>
        </MqttProvider>
      </div>
    );
  }
  componentDidMount() {
    this.initQiankun();
    // 新应用发布弹框
    // setTimeout(this.openNotification, 1500);
    // 在主应用注册呼机监听器，这里可以监听到其他应用的广播
    // pager.subscribe(v => {
    //   console.log(`监听到子应用${v.from}发来消息：`, v)
    //   if(v.token.message){
    //     this.props.changeMsgNum({ num: this.props.state.message.num+1})
    //   }
    // })
  }
  initQiankun = (option) => {
    let apps = [];
    if (option) {
      apps = option;
    } else {
      if (LibraryJs.localGet("apps") instanceof Array) {
        apps = LibraryJs.localGet("apps");
      }
    }
    const hostname = window.location.hostname; // 获取子应用的hostname （与父应用相同）
    // 从redux中存储公共数据，放到msg中，在子应用的mount钩子函数中使用这些公共数据
    let msg = {
      components: LibraryUi, // 从主应用读出的组件库
      utils: LibraryJs, // 从主应用读出的工具类库
      share: Share, // 主应用共享的redux
    };
    let defaultApp = null;
    apps = (apps || []).map((val) => {
      if (val.defaultRegister) defaultApp = val.routerBase;
      return {
        name: val.module,
        entry: `//${hostname}:${val.port}`,
        container: "#subapp-viewport",
        activeRule: val.routerBase,
        props: { ...msg }, // 公共数据传递给子组件
      };
    });
    let { actions, loadMicroApp } = initQiankun({
      apps,
      state: undefined,
      defaultApp,
      startOption: undefined,
    });
    this.props.setQiankunState({ actions, loadMicroApp });
  };
}
//获取状态
const mapStateToProps = (state) => {
  return {
    state: state,
  };
};
//获取方法
const mapDispatchToProps = (dispath) => {
  return bindActionCreators(
    {
      setQiankunState,
    },
    dispath
  );
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
